<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column align="center" v-for="item in props.table" :key="item" :prop="item.value" :label="item.label">
      <template #default="{ row, column, $index }">
        <slot :name="item.value" :row="row" :index="$index">
          {{ row[item.value] }}
        </slot>
      </template>
    </el-table-column>
    <el-table-column align="center" label="操作">
      <template #default="{ row, column, $index }">
        <slot name="operation" :row="row" :index="$index">
          <el-button type="text" @click="edit(row.id)" v-loading.fullscreen.lock="isEdit" link>修改</el-button>
          <el-popconfirm title="是否确定删除" @confirm="emit('del', row.id)">
            <template #reference>
              <el-button type="text" link>删除</el-button>
            </template>
          </el-popconfirm>
        </slot>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({ table: Array, tableData: Array });
const emit = defineEmits(["del", "edit"]);

const isEdit = ref(false)
const edit = (id) => {
  isEdit.value = true
  emit('edit', id)
  setTimeout(() => {
    isEdit.value = false
  }, 300)
}

</script>

<style lang="scss" scoped></style>
